<!DOCTYPE html>
<html>
<head>
    <title>模板页</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入 Bootstrap -->
    <link href="./css/bootstrap.css" rel="stylesheet" />
    <!-- 引入动画库 -->
    <link href="./css/animate.css" rel="stylesheet" />
    <!-- 引入字体图标库 -->
    <link href="./css/font-awesome.css" rel="stylesheet" />
    <!-- 引入自定义的样式 -->
    <link href="./css/custom.css" rel="stylesheet" />


    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" rel="external nofollow" ></script>          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" rel="external nofollow" ></script>       <![endif]-->
</head>
<body>

    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        <!-- Brand -->
        <a class="navbar-brand" href="#">EPSS</a>
       
        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
       
        <!-- Navbar links -->
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">窗帘</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">电饭锅</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">冰箱</a>
            </li> 
          </ul>
        </div> 
      </nav>


      <div id="demo" class="carousel slide" data-ride="carousel">
 
        <!-- 指示符 -->
        <ul class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" data-slide-to="1"></li>
          <li data-target="#demo" data-slide-to="2"></li>
        </ul>
       
        <!-- 轮播图片 -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
          </div>
          <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
          </div>
          <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
          </div>
        </div>
       
        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>
       
      </div>

      <div class="container">
        <div class="row">
          <div class="col-lg-3 col-sm-6 col-12 bg-warning">1</div>
          <div class="col-lg-3 col-sm-6 col-12">2</div>
          <div class="col-lg-3 col-sm-6 col-12">3</div>
          <div class="col-lg-3 col-sm-6 col-12">4</div>
        </div>
      </div>

    <div id="dis"></div>
    <button id="btn" class="btn btn-primary">获取数据</button>

<div id="app">
    
</div>


<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="js/jquery-3.3.1.js" ></script>
<!-- 包括所有已编译的插件 -->
<script src="./js/bootstrap.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/vue-resource.js"></script>
<script src="./js/custom.js"></script>

<script>
    /*
        直接创建chrome浏览器的快捷方式，在属性中找到打开路径，在…chrome.exe后面加上
        --args --disable-web-security --user-data-dir="C:/ChromeDevSession"
        临时关闭浏览器关于跨域的限制,也可以修改快捷方式持久支持
    */

    $(document).ready(function(){

        // $("#btn").click(function(){
        //     $.get("http://192.168.31.103:8888/data.json",function(mydata,state){
        //         console.log(mydata);
        //         $("#dis").text(JSON.parse(mydata).name);//如果服务器没有添加json类型,则返回的认为是文本
        //     });
        // });

        $("#btn").click(function(){
            $.ajax({
                url:"http://192.168.31.103:8888/data.json",
                method:"GET",
                response:JSON,//记得要在服务器上添加对应的类型否则客户端还需要转换
                success:function(mydata){
                    $("#dis").text(mydata.name);
                }
            });
        });


    });

    function handleResponse(response){
            console.log('The responsed data is: '+response.data);
        }
</script>
</body>
</html>